<template>

  <div id="app1">
    <div class="container-fluid container-med2" >
      <div class="select1">
        <el-select v-model="value1" placeholder="请选择课程" @change="change(value1)">
          <el-option
            v-for="item in options1"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="select2">
        <!--<el-select v-model="value2" placeholder="请选择班级">
          <el-option
            v-for="item in options2"
            :value="item.value">
          </el-option>
        </el-select>-->
      </div>
      <el-table :data="tableData1"  style="width: 100%;" stripe>
        <el-table-column type="index" >
        </el-table-column>
        <el-table-column  label="实验标题" header-align="center">
          <template scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" header-align="center">
          <template scope="scope">
            <span>{{ scope.row.startDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" header-align="center">
          <template scope="scope">
            <span>{{ scope.row.endDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  header-align="center">
          <template scope="scope">
            <el-button size="small" type="success"  @click.native="studentCheck(scope.$index, scope.row)">查看</el-button>
            <el-button size="small" type="success"  @click.native="studentEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>


    

    </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
  name: 'app',
  data () {
    return {
      options1: [],
      value1: '',

      // options2: [{
      //     value: '1'
      //   }, {
      //     value: '2'
      //   }, {
      //     value: '3'
      //   }, {
      //     value: '4'
      //   }, {
      //     value: '5'
      //   }],
      // value2: '',
      tableData1:[]
    }
  },
  methods: {
    change(v){
      if(v){
        var params = new URLSearchParams();
        params.append('ex_class',this.$store.state.user.course[v-1])
        var _this = this;
        axios.post('/experiment/getAllexperiment',params).then(function(res){
          for (var ex of res.data.allEx){
            ex.startDate=ex.startDate.substring(0,10);
            ex.endDate=ex.endDate.substring(0,10);
          }
          _this.tableData1 = res.data.allEx
          
        })
      }
    },
    studentCheck(index){
      console.log(123);
      this.$router.push({path: 'studentCheck',query:{title:this.tableData1[index].title}})
    },

    studentEdit(index){
        console.log(123);
        this.$router.push({path: 'studentEdit',query:{title:this.tableData1[index].title}})
    },

  },
  mounted:function(){ 
      var x=1;
      var params = new URLSearchParams();
      var user_account = window.localStorage.getItem('user');
      params.append('account',user_account);
      var _this = this;
      axios.post('/user',params).then(function(res){
        _this.$store.commit('user',res.data.signin_user);
        for (var course of _this.$store.state.user.course){
          _this.options1.push({label:course,value:x})
          x++
        }
      })
      

  }

}
</script>

<style scoped>


  .container-med2{
    padding-top:30px;
    margin-top: 50px;
    -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
    box-shadow:1px px 15px rgba(144, 144, 144, 1);
    width:1200px;
  }

  .select1{
    margin-bottom:20px;
    display:inline-block;
  }
  .select2{
    margin-bottom:20px;
    display:inline-block;
  }


</style>